<template>
  <div>
    <a-statistic-countdown
      :title="title"
      :value="deadline"
      format="D 天 H 时 m 分 s 秒"
    />
    <a-tabs v-model:activeKey="activeKey" centered>
      <a-tab-pane :key="1">
        <template #tab>
          <span> 支出 </span>
        </template>
        <div style="width: 85%; margin: auto">
          <div>
            <a-form>
              <a-row :gutter="10" type="flex" justify="start">
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="付款人">
                    <a-select
                      v-model:value="ExpenseList.queryParam.name1"
                      show-search
                      placeholder="请选择付款人"
                      @change="searchExpenseData"
                      :options="ExpenseList.useName1"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="收款人">
                    <a-input
                      placeholder="请输入收款人（对象）"
                      v-model:value="ExpenseList.queryParam.name2"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="消费类别">
                    <a-select
                      v-model:value="ExpenseList.queryParam.useVallue1"
                      show-search
                      placeholder="请选择消费类别"
                      @change="searchExpenseData"
                      :options="ExpenseList.useType1"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="消费方式">
                    <a-select
                      v-model:value="ExpenseList.queryParam.useVallue2"
                      show-search
                      placeholder="请选择消费方式"
                      @change="searchExpenseData"
                      :options="ExpenseList.useType2"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="金额">
                    <a-input-group>
                      <a-row :gutter="8">
                        <a-col :span="11">
                          <a-input-number
                            placeholder="最小金额"
                            v-model:value="ExpenseList.queryParam.minMoney"
                            :min="0"
                            :precision="0"
                          />
                        </a-col>
                        ~
                        <a-col :span="11">
                          <a-input-number
                            placeholder="最大金额"
                            v-model:value="ExpenseList.queryParam.maxMoney"
                            :min="0"
                            :precision="0"
                          />
                        </a-col>
                      </a-row>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="备注">
                    <a-input
                      placeholder="请选择备注"
                      v-model:value="ExpenseList.queryParam.remark"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="18" :sm="8" :lg="6">
                  <a-form-item label="消费日期">
                    <a-range-picker
                      v-model:value="ExpenseList.queryParam.DateArray"
                      :format="'YYYY-MM-DD'"
                      :valueFormat="'YYYY-MM-DD'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="float: right; margin-bottom: 20px">
            <a-button danger @click="resetExpenseData">重置</a-button>
          </div>
          <s-table
            :columns="ExpenseList.columns"
            :dataSource="ExpenseList.data"
            :loading="ExpenseList.loading"
            :locale="{ emptyText: '暂无数据' }"
            :showSorterTooltip="false"
            :scroll="{ y: 'calc(60vh)' }"
            columnDrag
            size="small"
            :pagination="{
              pageSize: ExpenseList.page.pageSize,
              pageSizeOptions: ['100', '500', '1000', '2000', '5000'],
              total: ExpenseList.page.total,
              showTotal: (total) => `共 ${total} 条数据`,
            }"
            @change="ExpenseList.handleTableChange"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'money'">
                <span> 金额（{{ ExpenseList.moneys }}） </span>
              </template>
            </template>
          </s-table>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="2">
        <template #tab>
          <span> 收入 </span>
        </template>
        <div style="width: 85%; margin: auto">
          <div>
            <a-form>
              <a-row :gutter="10" type="flex" justify="start">
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="付款人">
                    <a-input
                      placeholder="请输入付款人（对象）"
                      v-model:value="IncomeList.queryParam.name2"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="收款人">
                    <a-select
                      v-model:value="IncomeList.queryParam.name1"
                      show-search
                      placeholder="请选择收款人"
                      @change="searchIncomeData"
                      :options="IncomeList.useName1"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="收入类别">
                    <a-select
                      v-model:value="IncomeList.queryParam.useVallue1"
                      show-search
                      placeholder="请选择收入类别"
                      @change="searchIncomeData"
                      :options="IncomeList.useType1"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="收入方式">
                    <a-select
                      v-model:value="IncomeList.queryParam.useVallue2"
                      show-search
                      placeholder="请选择收入方式"
                      @change="searchIncomeData"
                      :options="IncomeList.useType2"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="金额">
                    <a-input-group>
                      <a-row :gutter="8">
                        <a-col :span="11">
                          <a-input-number
                            placeholder="最小金额"
                            v-model:value="IncomeList.queryParam.minMoney"
                            :min="0"
                            :precision="0"
                          />
                        </a-col>
                        ~
                        <a-col :span="11">
                          <a-input-number
                            placeholder="最大金额"
                            v-model:value="IncomeList.queryParam.maxMoney"
                            :min="0"
                            :precision="0"
                          />
                        </a-col>
                      </a-row>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="备注">
                    <a-input
                      placeholder="请选择备注"
                      v-model:value="IncomeList.queryParam.remark"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="18" :sm="8" :lg="6">
                  <a-form-item label="收入日期">
                    <a-range-picker
                      v-model:value="IncomeList.queryParam.DateArray"
                      :format="'YYYY-MM-DD'"
                      :valueFormat="'YYYY-MM-DD'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="float: right; margin-bottom: 20px">
            <a-button danger @click="resetIncomeData">重置</a-button>
          </div>
          <s-table
            :columns="IncomeList.columns"
            :dataSource="IncomeList.data"
            :loading="IncomeList.loading"
            :locale="{ emptyText: '暂无数据' }"
            :showSorterTooltip="false"
            :scroll="{ y: 'calc(60vh)' }"
            columnDrag
            size="small"
            :pagination="{
              pageSize: IncomeList.page.pageSize,
              total: IncomeList.page.total,
              pageSizeOptions: ['100', '500', '1000', '2000', '5000'],
              showTotal: (total) => `共 ${total} 条数据`,
            }"
            @change="IncomeList.handleTableChange"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'money'">
                <span> 金额（{{ IncomeList.moneys }}） </span>
              </template>
            </template>
          </s-table>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="3">
        <template #tab>
          <span> 汇款 </span>
        </template>
        <div style="width: 85%; margin: auto">
          <div>
            <a-form>
              <a-row :gutter="10" type="flex" justify="start">
                <a-col :xs="12" :sm="6" :lg="4">
                  <a-form-item label="汇款人">
                    <a-select
                      v-model:value="OtherList.queryParam.name1"
                      show-search
                      placeholder="请选择汇款人"
                      @change="searchOtherData"
                      :options="OtherList.useName1"
                    >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xs="18" :sm="8" :lg="6">
                  <a-form-item label="消费日期">
                    <a-range-picker
                      v-model:value="OtherList.queryParam.DateArray"
                      :format="'YYYY-MM-DD'"
                      :valueFormat="'YYYY-MM-DD'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="float: right; margin-bottom: 20px">
            <a-button danger @click="resetOtherData">重置</a-button>
          </div>
          <s-table
            :columns="OtherList.columns"
            :dataSource="OtherList.data"
            :loading="OtherList.loading"
            :locale="{ emptyText: '暂无数据' }"
            :showSorterTooltip="false"
            :scroll="{ y: 'calc(60vh)' }"
            columnDrag
            size="small"
            :pagination="{
              pageSize: OtherList.page.pageSize,
              total: OtherList.page.total,
              pageSizeOptions: ['100', '500', '1000', '2000', '5000'],
              showTotal: (total) => `共 ${total} 条数据`,
            }"
            @change="OtherList.handleTableChange"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'money'">
                <span> 金额（{{ OtherList.moneys }}） </span>
              </template>
            </template>
          </s-table>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="4">
        <template #tab>
          <span>基金 </span>
        </template>
        <div style="width: 85%; margin: auto">
          <s-table
            :columns="FundList.columns"
            :dataSource="FundList.data"
            :loading="FundList.loading"
            :locale="{ emptyText: '暂无数据' }"
            :showSorterTooltip="false"
            :scroll="{ y: 'calc(60vh)' }"
            columnDrag
            size="small"
            :pagination="{
              pageSize: FundList.page.pageSize,
              total: FundList.page.total,
              pageSizeOptions: ['100', '500', '1000', '2000', '5000'],
              showTotal: (total) => `共 ${total} 条数据`,
            }"
            @change="FundList.handleTableChange"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'positionMoney'">
                <span>
                  {{ column.title }}（{{ FundList.detailsMoneys }}）
                </span>
              </template>

              <template v-else-if="column.key === 'incomeMoney'">
                <span> {{ column.title }}（{{ FundList.incomeMoneys }}） </span>
              </template>
            </template>

            <template #bodyCell="{ column, text, record, index }">
              <template v-if="column.title === '操作'">
                <a-space>
                  <a @click="FundList.details.showModal(record)">详情</a>
                  <a @click="FundList.income.showModal(record)">收益</a>
                </a-space>
              </template>
            </template>
          </s-table>
        </div>

        <a-modal
          :title="FundList.details.title"
          centered
          width="1000px"
          v-model:visible="FundList.details.show"
          :footer="null"
          @cancel="FundList.details.handelCancel"
        >
          <s-table
            :columns="FundList.details.columns"
            :dataSource="FundList.details.data"
            :loading="FundList.details.loading"
            :locale="{ emptyText: '暂无数据' }"
            :showSorterTooltip="false"
            :scroll="{ y: 'calc(60vh)' }"
            columnDrag
            size="small"
            :pagination="{
              pageSize: FundList.details.page.pageSize,
              total: FundList.details.page.total,
              pageSizeOptions: ['100', '500', '1000', '2000', '5000'],
              showTotal: (total) => `共 ${total} 条数据`,
            }"
            @change="FundList.details.handleTableChange"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'money'">
                <span> 金额（{{ FundList.details.moneys }}） </span>
              </template>
            </template>
          </s-table>
        </a-modal>

        <a-modal
          title="收益"
          centered
          v-model:visible="FundList.income.show"
          :footer="null"
          @cancel="FundList.income.handelCancel"
        >
          <s-table
            :columns="FundList.income.columns"
            :dataSource="FundList.income.data"
            :loading="FundList.income.loading"
            :locale="{ emptyText: '暂无数据' }"
            :showSorterTooltip="false"
            :scroll="{ y: 'calc(60vh)' }"
            size="small"
            :pagination="{
              pageSize: FundList.income.page.pageSize,
              total: FundList.income.page.total,
              pageSizeOptions: ['100', '500', '1000', '2000', '5000'],
              showTotal: (total) => `共 ${total} 条数据`,
            }"
            @change="FundList.income.handleTableChange"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'money'">
                <span> 金额（{{ FundList.income.moneys }}） </span>
              </template>
            </template>
          </s-table>
        </a-modal>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import dayjs from "dayjs";
import ExpenseData from "@/static/Expense.json";
import IncomeData from "@/static/Income.json";
import OtherData from "@/static/Other.json";
import ExpenseDataV2 from "@/static/ExpenseV2.json";
import IncomeDataV2 from "@/static/IncomeV2.json";
import OtherDataV2 from "@/static/OtherV2.json";
import FundData from "@/static/Fund.json";

export default defineComponent({
  name: "ExpensE",
  watch: {
    //#region 支出
    "ExpenseList.queryParam.name2"() {
      this.searchExpenseData();
    },
    "ExpenseList.queryParam.minMoney"() {
      this.searchExpenseData();
    },
    "ExpenseList.queryParam.maxMoney"() {
      this.searchExpenseData();
    },
    "ExpenseList.queryParam.remark"() {
      this.searchExpenseData();
    },
    "ExpenseList.queryParam.DateArray"() {
      this.searchExpenseData();
    },
    //#endregion

    //#region 收入
    "IncomeList.queryParam.name2"() {
      this.searchIncomeData();
    },
    "IncomeList.queryParam.minMoney"() {
      this.searchIncomeData();
    },
    "IncomeList.queryParam.maxMoney"() {
      this.searchIncomeData();
    },
    "IncomeList.queryParam.remark"() {
      this.searchIncomeData();
    },
    "IncomeList.queryParam.DateArray"() {
      this.searchIncomeData();
    },
    //#endregion

    //#region 汇款
    "OtherList.queryParam.DateArray"() {
      this.searchOtherData();
    },
    //#endregion
  },
  methods: {
    //货币格式化
    formatMoney(number, places, symbol, thousand, decimal) {
      number = number || 0;
      places = !isNaN((places = Math.abs(places))) ? places : 2;
      symbol = symbol !== undefined ? symbol : "￥";
      thousand = thousand || ",";
      decimal = decimal || ".";
      var negative = number < 0 ? "-" : "",
        i =
          parseInt((number = Math.abs(+number || 0).toFixed(places)), 10) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
      return (
        symbol +
        negative +
        (j ? i.substr(0, j) + thousand : "") +
        i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) +
        (places
          ? decimal +
            Math.abs(number - i)
              .toFixed(places)
              .slice(2)
          : "")
      );
    },

    //#region 支出
    searchExpenseData() {
      this.ExpenseList.loading = true;
      setTimeout(() => {
        this.ExpenseList.moneys = 0;
        this.ExpenseList.data = [];
        this.ExpenseList.data = this.ExpenseList.arryData.map((res, index) => {
          return {
            key: index,
            id: ++index,
            name1: res.name1,
            name2: res.name2,
            type1: res.type1,
            type2: res.type2,
            money: res.money,
            remark: res.remark,
            create_at: res.create_at,
          };
        });

        if (
          this.ExpenseList.queryParam.name1 !== null &&
          this.ExpenseList.queryParam.name1 !== "全部"
        ) {
          this.ExpenseList.data = this.ExpenseList.data.filter((res) => {
            if (this.ExpenseList.queryParam.name1.startsWith("樊")) {
              return res.name1.startsWith("樊");
            } else {
              return res.name1.startsWith("阳");
            }
          });
        }

        if (this.ExpenseList.queryParam.name2 !== null) {
          this.ExpenseList.data = this.ExpenseList.data.filter(
            (res) => res.name2.indexOf(this.ExpenseList.queryParam.name2) > -1
          );
        }

        if (
          this.ExpenseList.queryParam.useVallue1 !== null &&
          this.ExpenseList.queryParam.useVallue1 !== "全部"
        ) {
          this.ExpenseList.data = this.ExpenseList.data.filter(
            (res) => res.type1 === this.ExpenseList.queryParam.useVallue1
          );
        }

        if (
          this.ExpenseList.queryParam.useVallue2 !== null &&
          this.ExpenseList.queryParam.useVallue2 !== "全部"
        ) {
          this.ExpenseList.data = this.ExpenseList.data.filter(
            (res) => res.type2 === this.ExpenseList.queryParam.useVallue2
          );
        }

        if (
          this.ExpenseList.queryParam.minMoney !== null &&
          this.ExpenseList.minMoney !== 0
        ) {
          this.ExpenseList.data = this.ExpenseList.data.filter(
            (res) => res.money >= this.ExpenseList.queryParam.minMoney
          );
        }

        if (
          this.ExpenseList.queryParam.maxMoney !== null &&
          this.ExpenseList.maxMoney !== 0
        ) {
          this.ExpenseList.data = this.ExpenseList.data.filter(
            (res) => res.money <= this.ExpenseList.queryParam.maxMoney
          );
        }

        if (this.ExpenseList.queryParam.remark !== null) {
          this.ExpenseList.data = this.ExpenseList.data.filter(
            (res) =>
              res.remark
                .toLowerCase()
                .indexOf(this.ExpenseList.queryParam.remark.toLowerCase()) > -1
          );
        }

        if (this.ExpenseList.queryParam.DateArray !== null) {
          this.ExpenseList.data = this.ExpenseList.data.filter(
            (res) =>
              Date.parse(res.create_at) >=
                Date.parse(this.ExpenseList.queryParam.DateArray[0]) &&
              Date.parse(res.create_at) <=
                Date.parse(this.ExpenseList.queryParam.DateArray[1])
          );
        }

        for (let i = 0; i < this.ExpenseList.data.length; i++) {
          this.ExpenseList.moneys =
            this.ExpenseList.moneys + this.ExpenseList.data[i].money;
        }

        this.ExpenseList.moneys = this.formatMoney(this.ExpenseList.moneys);

        this.ExpenseList.loading = false;
      }, 200);
    },

    resetExpenseData() {
      this.ExpenseList.queryParam = {
        name1: "阳大杰",
        name2: null,
        useVallue1: "全部",
        useVallue2: "全部",
        minMoney: null,
        maxMoney: null,
        remark: null,
        // DateArray: null,
        DateArray: [
          dayjs(new Date()).startOf("month").format("YYYY-MM-DD"),
          dayjs(new Date()).endOf("month").format("YYYY-MM-DD"),
        ],
      };
      this.searchExpenseData();
    },
    //#endregion

    //#region 收入
    searchIncomeData() {
      this.IncomeList.loading = true;

      setTimeout(() => {
        this.IncomeList.moneys = 0;
        this.IncomeList.data = [];

        this.IncomeList.data = this.IncomeList.arryData.map((res, index) => {
          return {
            key: index,
            id: ++index,
            name2: res.name2,
            name1: res.name1,
            type1: res.type1,
            type2: res.type2,
            money: res.money,
            remark: res.remark,
            create_at: res.create_at,
          };
        });

        if (
          this.IncomeList.queryParam.name1 !== null &&
          this.IncomeList.queryParam.name1 !== "全部"
        ) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) => res.name1 === this.IncomeList.queryParam.name1
          );
        }

        if (this.IncomeList.queryParam.name2 !== null) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) => res.name2.indexOf(this.IncomeList.queryParam.name2) > -1
          );
        }

        if (
          this.IncomeList.queryParam.useVallue1 !== null &&
          this.IncomeList.queryParam.useVallue1 !== "全部"
        ) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) => res.type1 === this.IncomeList.queryParam.useVallue1
          );
        }

        if (
          this.IncomeList.queryParam.useVallue2 !== null &&
          this.IncomeList.queryParam.useVallue2 !== "全部"
        ) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) => res.type2 === this.IncomeList.queryParam.useVallue2
          );
        }

        if (
          this.IncomeList.queryParam.minMoney !== null &&
          this.IncomeList.minMoney !== 0
        ) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) => res.money >= this.IncomeList.queryParam.minMoney
          );
        }

        if (
          this.IncomeList.queryParam.maxMoney !== null &&
          this.IncomeList.maxMoney !== 0
        ) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) => res.money <= this.IncomeList.queryParam.maxMoney
          );
        }

        if (this.IncomeList.queryParam.remark !== null) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) =>
              res.remark
                .toLowerCase()
                .indexOf(this.IncomeList.queryParam.remark.toLowerCase()) > -1
          );
        }

        if (this.IncomeList.queryParam.DateArray !== null) {
          this.IncomeList.data = this.IncomeList.data.filter(
            (res) =>
              Date.parse(res.create_at) >=
                Date.parse(this.IncomeList.queryParam.DateArray[0]) &&
              Date.parse(res.create_at) <=
                Date.parse(this.IncomeList.queryParam.DateArray[1])
          );
        }

        for (let i = 0; i < this.IncomeList.data.length; i++) {
          this.IncomeList.moneys =
            this.IncomeList.moneys + this.IncomeList.data[i].money;
        }

        this.IncomeList.moneys = this.formatMoney(this.IncomeList.moneys);

        this.IncomeList.loading = false;
      }, 200);
    },

    resetIncomeData() {
      this.IncomeList.queryParam = {
        name1: "阳大杰",
        name2: null,
        useVallue1: "全部",
        useVallue2: "全部",
        minMoney: null,
        maxMoney: null,
        remark: null,
        DateArray: [
          dayjs(new Date()).startOf("month").format("YYYY-MM-DD"),
          dayjs(new Date()).endOf("month").format("YYYY-MM-DD"),
        ],
      };
      this.searchIncomeData();
    },
    //#endregion

    //#region 汇款
    searchOtherData() {
      this.OtherList.loading = true;
      setTimeout(() => {
        this.OtherList.moneys = 0;
        this.OtherList.data = [];

        this.OtherList.data = this.OtherList.arryData.map((res, index) => {
          return {
            key: index,
            id: ++index,
            name1: res.name1,
            name2: res.name2,
            type: res.type,
            money: res.money,
            create_at: res.create_at,
          };
        });

        if (
          this.OtherList.queryParam.name1 !== null &&
          this.OtherList.queryParam.name1 !== "全部"
        ) {
          this.OtherList.data = this.OtherList.data.filter(
            (res) => res.name1 === this.OtherList.queryParam.name1
          );
        }

        if (this.OtherList.queryParam.DateArray !== null) {
          this.OtherList.data = this.OtherList.data.filter(
            (res) =>
              Date.parse(res.create_at) >=
                Date.parse(this.OtherList.queryParam.DateArray[0]) &&
              Date.parse(res.create_at) <=
                Date.parse(this.OtherList.queryParam.DateArray[1])
          );
        }

        for (let i = 0; i < this.OtherList.data.length; i++) {
          this.OtherList.moneys =
            this.OtherList.moneys + this.OtherList.data[i].money;
        }
        this.OtherList.moneys = this.formatMoney(this.OtherList.moneys);
        this.OtherList.loading = false;
      }, 200);
    },

    resetOtherData() {
      this.OtherList.queryParam = {
        name1: "阳大杰",
        DateArray: null,
      };
      this.searchOtherData();
    },
    //#endregion
  },
  created() {
    //#region 支出
    this.ExpenseList.data = this.ExpenseList.arryData.map((res, index) => {
      return {
        key: index,
        id: ++index,
        name1: res.name1,
        name2: res.name2,
        type1: res.type1,
        type2: res.type2,
        money: res.money,
        remark: res.remark,
        create_at: res.create_at,
      };
    });

    if (
      this.ExpenseList.queryParam.name1 !== "全部" &&
      this.ExpenseList.queryParam.name1 != null
    ) {
      this.ExpenseList.data = this.ExpenseList.data.filter(
        (res) => res.name1 === this.ExpenseList.queryParam.name1
      );
    }

    if (this.ExpenseList.queryParam.DateArray.length > 0) {
      this.ExpenseList.data = this.ExpenseList.data.filter((res) => {
        let create_at = Date.parse(res.create_at);
        let minDate = Date.parse(this.ExpenseList.queryParam.DateArray[0]);
        let maxDate = Date.parse(this.ExpenseList.queryParam.DateArray[1]);
        return create_at >= minDate && create_at <= maxDate;
      });
    }

    for (let i = 0; i < this.ExpenseList.data.length; i++) {
      this.ExpenseList.moneys =
        this.ExpenseList.moneys + this.ExpenseList.data[i].money;
    }

    this.ExpenseList.moneys = this.formatMoney(this.ExpenseList.moneys);

    //#endregion

    //#region 收入
    this.IncomeList.data = this.IncomeList.arryData.map((res, index) => {
      return {
        key: index,
        id: ++index,
        name2: res.name2,
        name1: res.name1,
        type1: res.type1,
        type2: res.type2,
        money: res.money,
        remark: res.remark,
        create_at: res.create_at,
      };
    });

    if (
      this.IncomeList.queryParam.name1 !== "全部" &&
      this.IncomeList.queryParam.name1 !== null
    ) {
      this.IncomeList.data = this.IncomeList.data.filter(
        (res) => res.name1 === this.IncomeList.queryParam.name1
      );
    }

    if (this.IncomeList.queryParam.DateArray !== null) {
      this.IncomeList.data = this.IncomeList.data.filter((res) => {
        let create_at = Date.parse(res.create_at);
        let minDate = Date.parse(this.IncomeList.queryParam.DateArray[0]);
        let maxDate = Date.parse(this.IncomeList.queryParam.DateArray[1]);
        return create_at >= minDate && create_at <= maxDate;
      });
    }

    for (let i = 0; i < this.IncomeList.data.length; i++) {
      this.IncomeList.moneys =
        this.IncomeList.moneys + this.IncomeList.data[i].money;
    }

    this.IncomeList.moneys = this.formatMoney(this.IncomeList.moneys);
    //#endregion

    //#region 汇款
    this.OtherList.data = this.OtherList.arryData.map((res, index) => {
      return {
        key: index,
        id: ++index,
        name1: res.name1,
        name2: res.name2,
        type: res.type,
        money: res.money,
        create_at: res.create_at,
      };
    });

    if (
      this.OtherList.queryParam.name1 !== "全部" &&
      this.OtherList.queryParam.name1 !== null
    ) {
      this.OtherList.data = this.OtherList.data.filter(
        (res) => res.name1 === this.OtherList.queryParam.name1
      );
    }

    for (let i = 0; i < this.OtherList.data.length; i++) {
      this.OtherList.moneys =
        this.OtherList.moneys + this.OtherList.data[i].money;
    }

    this.OtherList.moneys = this.formatMoney(this.OtherList.moneys);
    //#endregion

    //#region 基金

    let nameList = Array.from(new Set(FundData.details.map((res) => res.name)));
    for (let i = 0; i < nameList.length; i++) {
      const item = nameList[i];
      let detailsData = FundData.details.filter((res) => res.name === item);
      const positionMoney = detailsData.reduce((sum, entry) => {
        if (entry.type1 === "买入") {
          return sum + entry.money;
        } else if (entry.type1 === "卖出") {
          return sum - entry.money;
        }
        return sum;
      }, 0);

      let incomeData = FundData.income.filter((res) => res.name === item);
      const incomeMoney = incomeData.reduce(
        (sum, entry) => sum + entry.money,
        0
      );
      this.FundList.data.push({
        key: i,
        id: i + 1,
        name1: "阳大杰",
        name2: item,
        type: detailsData[0].type2,
        positionMoney: this.formatMoney(positionMoney),
        incomeMoney: this.formatMoney(incomeMoney),
      });
    }

    this.FundList.detailsMoneys = this.FundList.data.reduce(
      (sum, entry) =>
        sum + parseFloat(entry.positionMoney.replace(/[￥,]/g, "")),
      0
    );

    this.FundList.incomeMoneys = this.FundList.data.reduce(
      (sum, entry) => sum + parseFloat(entry.incomeMoney.replace(/[￥,]/g, "")),
      0
    );

    this.FundList.detailsMoneys = this.formatMoney(this.FundList.detailsMoneys);
    this.FundList.incomeMoneys = this.formatMoney(this.FundList.incomeMoneys);

    //#endregion
  },
  data() {
    //#region 计算上下班
    let now = new Date();
    let title = "距离下班";
    let endToday =
      new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0, 0) -
      now;
    let dayOfWeek = now.getDay();

    if (dayOfWeek === 6 || dayOfWeek === 0) {
      title = "距离上班";
      endToday =
        new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate() + (dayOfWeek === 6 ? 2 : 1),
          9,
          0,
          0,
          0
        ) - now;
    } else if (dayOfWeek === 5 && endToday < 0) {
      title = "距离上班";
      endToday =
        new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate() + 3,
          9,
          0,
          0,
          0
        ) - now;
    } else if (endToday < 0) {
      title = "距离上班";
      endToday =
        new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate() + 1,
          9,
          0,
          0,
          0
        ) - now;
    }
    let deadline = Date.now() + endToday;
    //#endregion

    return {
      activeKey: 4,
      ExpenseList: {
        queryParam: {
          name1: "阳大杰",
          name2: null,
          useVallue1: "全部",
          useVallue2: "全部",
          minMoney: null,
          maxMoney: null,
          remark: null,
          DateArray: [
            dayjs(new Date()).startOf("month").format("YYYY-MM-DD"),
            dayjs(new Date()).endOf("month").format("YYYY-MM-DD"),
          ],
        },
        loading: false,
        useName1: [
          // { value: "全部", label: "全部" },
          { value: "阳大杰", label: "阳大杰" },
          // { value: "樊大琪", label: "樊大琪" },
        ],
        useType1: [
          { value: "全部", label: "全部" },
          { value: "转账红包", label: "转账红包" },
          { value: "餐饮美食", label: "餐饮美食" },
          { value: "日用百货", label: "日用百货" },
          { value: "数码电器", label: "数码电器" },
          { value: "交通出行", label: "交通出行" },
          { value: "住房物业", label: "住房物业" },
          { value: "游戏娱乐", label: "游戏娱乐" },
          { value: "生活服务", label: "生活服务" },
          { value: "医疗健康", label: "医疗健康" },
          { value: "服饰装扮", label: "服饰装扮" },
          { value: "美容美发", label: "美容美发" },
          { value: "充值缴费", label: "充值缴费" },
          { value: "其他", label: "其他" },
        ],
        useType2: [
          { value: "全部", label: "全部" },
          { value: "微信支付", label: "微信支付" },
          { value: "支付宝", label: "支付宝" },
          { value: "数字人民币", label: "数字人民币" },
          { value: "手机银行", label: "手机银行" },
          { value: "现金", label: "现金" },
          { value: "其他", label: "其他" },
        ],
        moneys: 0,
        columns: [
          {
            title: "ID",
            dataIndex: "id",
            key: "id",
            width: 50,
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "付款人",
            dataIndex: "name1",
            key: "name1",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "收款人（对象）",
            dataIndex: "name2",
            key: "name2",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "消费类别",
            dataIndex: "type1",
            key: "type1",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "消费方式",
            dataIndex: "type2",
            key: "type2",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "金额",
            key: "money",
            dataIndex: "money",
            sorter: (a, b) => {
              return a["money"] - b["money"];
            },
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "备注",
            key: "remark",
            dataIndex: "remark",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "消费日期",
            key: "create_at",
            dataIndex: "create_at",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
        ],
        arryData: ExpenseDataV2.concat(ExpenseData),
        data: [],
        page: {
          pageSize: 100,
          total: 0,
        },
        handleTableChange: ({ pageSize }) => {
          this.ExpenseList.page.pageSize = pageSize;
          this.searchExpenseData();
        },
      },
      IncomeList: {
        queryParam: {
          name1: "阳大杰",
          name2: null,
          useVallue1: "全部",
          useVallue2: "全部",
          minMoney: null,
          maxMoney: null,
          remark: null,
          DateArray: [
            dayjs(new Date()).startOf("month").format("YYYY-MM-DD"),
            dayjs(new Date()).endOf("month").format("YYYY-MM-DD"),
          ],
        },
        useName1: [
          // { value: "全部", label: "全部" },
          { value: "阳大杰", label: "阳大杰" },
          // { value: "樊大琪", label: "樊大琪" },
        ],
        loading: false,
        useType1: [
          { value: "全部", label: "全部" },
          { value: "工资", label: "工资" },
          { value: "年终奖", label: "年终奖" },
          { value: "报销", label: "报销" },
          { value: "转账红包", label: "转账红包" },
          { value: "其他", label: "其他" },
        ],
        useType2: [
          { value: "全部", label: "全部" },
          { value: "微信支付", label: "微信支付" },
          { value: "支付宝", label: "支付宝" },
          { value: "手机银行", label: "手机银行" },
          { value: "现金", label: "现金" },
          { value: "其他", label: "其他" },
        ],
        moneys: 0,
        columns: [
          {
            title: "ID",
            dataIndex: "id",
            key: "id",
            width: 50,
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "付款人（对象）",
            dataIndex: "name2",
            key: "name2",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "收款人",
            dataIndex: "name1",
            key: "name1",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "收入类别",
            dataIndex: "type1",
            key: "type1",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "收入方式",
            dataIndex: "type2",
            key: "type2",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "金额",
            key: "money",
            dataIndex: "money",
            sorter: (a, b) => {
              return a["money"] - b["money"];
            },
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "备注",
            key: "remark",
            dataIndex: "remark",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "收入日期",
            key: "create_at",
            dataIndex: "create_at",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
        ],
        arryData: IncomeDataV2.concat(IncomeData),
        data: [],
        page: {
          pageSize: 100,
          total: 0,
        },
        handleTableChange: ({ pageSize }) => {
          this.IncomeList.page.pageSize = pageSize;
          this.searchIncomeData();
        },
      },
      OtherList: {
        queryParam: {
          name1: "阳大杰",
          DateArray: null,
        },
        useName1: [
          // { value: "全部", label: "全部" },
          { value: "阳大杰", label: "阳大杰" },
          // { value: "樊大琪", label: "樊大琪" },
        ],
        loading: false,
        moneys: 0,
        columns: [
          {
            title: "ID",
            dataIndex: "id",
            key: "id",
            width: 50,
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "付款人",
            dataIndex: "name1",
            key: "name1",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "收款人（对象）",
            dataIndex: "name2",
            key: "name2",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "消费方式",
            dataIndex: "type",
            key: "type",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "金额",
            key: "money",
            dataIndex: "money",
            sorter: (a, b) => {
              return a["money"] - b["money"];
            },
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "消费日期",
            key: "create_at",
            dataIndex: "create_at",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
        ],
        arryData: OtherDataV2.concat(OtherData),
        data: [],
        page: {
          total: 0,
          pageSize: 100,
        },
        handleTableChange: ({ pageSize }) => {
          this.OtherList.page.pageSize = pageSize;
          this.searchOtherData();
        },
      },
      FundList: {
        loading: false,
        detailsMoneys: 0,
        incomeMoneys: 0,
        columns: [
          {
            title: "ID",
            dataIndex: "id",
            key: "id",
            width: 50,
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "购买人",
            dataIndex: "name1",
            key: "name1",

            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "买入基金",
            dataIndex: "name2",
            key: "name2",
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "持仓金额",
            key: "positionMoney",
            dataIndex: "positionMoney",
            sorter: (a, b) => {
              return (
                parseFloat(a["positionMoney"].replace(/[￥,]/g, "")) -
                parseFloat(b["positionMoney"].replace(/[￥,]/g, ""))
              );
            },
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "总收益",
            key: "incomeMoney",
            dataIndex: "incomeMoney",
            sorter: (a, b) => {
              return (
                parseFloat(a["incomeMoney"].replace(/[￥,]/g, "")) -
                parseFloat(b["incomeMoney"].replace(/[￥,]/g, ""))
              );
            },
            ellipsis: true,
            resizable: true,
            align: "left",
          },
          {
            title: "操作",
            fixed: "right",
            align: "center",
          },
        ],
        data: [],
        page: {
          total: 0,
          pageSize: 100,
        },
        handleTableChange: ({ pageSize }) => {
          this.FundList.page.pageSize = pageSize;
          // this.searchFundListData();
        },
        details: {
          show: false,
          loading: false,
          moneys: 0,
          columns: [
            {
              title: "操作类型",
              dataIndex: "type1",
              key: "type1",
              ellipsis: true,
              resizable: true,
              align: "left",
            },
            {
              title: "消费方式",
              dataIndex: "type2",
              key: "type2",
              ellipsis: true,
              resizable: true,
              align: "left",
            },
            {
              title: "金额",
              key: "money",
              dataIndex: "money",
              sorter: (a, b) => {
                return a["money"] - b["money"];
              },

              ellipsis: true,
              resizable: true,
              align: "left",
            },
            {
              title: "备注",
              key: "remark",
              dataIndex: "remark",
              ellipsis: true,
              resizable: true,
              align: "left",
            },
            {
              title: "操作日期",
              key: "create_at",
              dataIndex: "create_at",
              ellipsis: true,
              resizable: true,
              align: "left",
            },
          ],
          arryData: FundData.details,
          data: [],
          page: {
            total: 0,
            pageSize: 100,
          },
          handleTableChange: ({ pageSize }) => {
            this.FundList.details.page.pageSize = pageSize;
            // this.searchFundListData();
          },
          showModal: (record) => {
            this.FundList.details.show = true;

            this.FundList.details.title = record.name2;
            this.FundList.details.data = this.FundList.details.arryData
              .filter((res) => res.name === record.name2)
              .map((res, index) => {
                return {
                  key: index,
                  type1: res.type1,
                  type2: res.type2,
                  money: res.money,
                  remark: res.remark,
                  create_at: res.create_at,
                };
              });

            for (let i = 0; i < this.FundList.details.data.length; i++) {
              if (this.FundList.details.data[i].type1 === "买入") {
                this.FundList.details.moneys =
                  this.FundList.details.moneys +
                  this.FundList.details.data[i].money;
              } else {
                this.FundList.details.moneys =
                  this.FundList.details.moneys -
                  this.FundList.details.data[i].money;
              }
            }

            this.FundList.details.moneys = this.formatMoney(
              this.FundList.details.moneys
            );

            this.FundList.details.data = this.FundList.details.data.sort(
              (a, b) => new Date(b.create_at) - new Date(a.create_at)
            );
          },
          handelCancel: () => {
            this.FundList.details.show = false;
            this.FundList.details.moneys = 0;
            this.FundList.details.data = [];
          },
        },
        income: {
          show: false,
          loading: false,
          moneys: 0,
          columns: [
            {
              title: "收益",
              dataIndex: "money",
              key: "money",
              width: 200,
            },
            {
              title: "日期",
              key: "create_at",
              dataIndex: "create_at",
            },
          ],
          arryData: FundData.income,
          data: [],
          page: {
            total: 0,
            pageSize: 100,
          },
          handleTableChange: ({ pageSize }) => {
            this.FundList.income.page.pageSize = pageSize;
            // this.searchFundListData();
          },
          showModal: (record) => {
            this.FundList.income.show = true;

            this.FundList.income.data = this.FundList.income.arryData
              .filter((res) => res.name === record.name2)
              .map((res, index) => {
                return {
                  key: index,
                  name: res.name,
                  money: res.money,
                  create_at: res.create_at,
                };
              });

            for (let i = 0; i < this.FundList.income.data.length; i++) {
              this.FundList.income.moneys =
                this.FundList.income.moneys +
                this.FundList.income.data[i].money;
            }

            this.FundList.income.moneys = this.formatMoney(
              this.FundList.income.moneys
            );

            this.FundList.income.data = this.FundList.income.data.sort(
              (a, b) => new Date(b.create_at) - new Date(a.create_at)
            );
          },
          handelCancel: () => {
            this.FundList.income.show = false;
            this.FundList.income.moneys = 0;
            this.FundList.income.data = [];
          },
        },
      },
      title,
      deadline,
    };
  },
});
</script>